<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/lib/theme-chalk/index.css" />
    <!--<link rel="stylesheet" href="../../styles/common.css" />-->
    <link rel="stylesheet" href="../../styles/page.css" />
    <style>
        .right{
            position: absolute;
            margin-right: 40px;
            top:40px;
            right: 0;
        }
    </style>
</head>
<body>
<div class="addBrand-container" id="admin-add-app">
    <div class="container">
        <el-form ref="ruleForm" :model="ruleForm" :inline="false" label-width="180px" class="demo-ruleForm">
<!--            <div class="base">-->
                <el-form-item label="姓名">
                    <el-input v-model="ruleForm.name" placeholder="请输入姓名"></el-input>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input v-model="ruleForm.age" placeholder="请输入年龄"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-select v-model="ruleForm.sex" placeholder="请选择性别">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select>
                </el-form-item>
<!--            </div>-->
<!--            <div class="right">-->
                <el-form-item label="学校">
                    <el-input v-model="ruleForm.school" placeholder="请输入您的学校"></el-input>
                </el-form-item>
                <el-form-item label="专业">
                    <el-input v-model="ruleForm.major" placeholder="请输入专业"></el-input>
                </el-form-item>
                <el-form-item label="年级">
                    <el-input v-model="ruleForm.grade" placeholder="请输入入学年份,如2023"></el-input>
                </el-form-item>
                <el-form-item label="家庭住址">
                    <el-input v-model="ruleForm.address" placeholder="请输入家庭住址"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="ruleForm.phone" placeholder="请输入电话"></el-input>
                </el-form-item>
                <el-form-item label="父母电话">
                    <el-input v-model="ruleForm.parentPhone" placeholder="请输入父母电话"></el-input>
                </el-form-item>
                <el-form-item label="去向">
                    <el-input v-model="ruleForm.gone" placeholder="请输入去向"></el-input>
                </el-form-item>
                <el-form-item label="渠道">
                    <el-select v-model="ruleForm.channelName" placeholder="请选择渠道">
                        <el-option v-for="item in channelNames" :key="item" :label="item" :value="item">{{item}}</el-option>
                    </el-select>
                </el-form-item>

<!--            </div>-->
<!--            <div class="mine">-->
                <el-form-item label="考研或就业">
                    <el-input v-model="ruleForm.study" placeholder="是否要考研"></el-input>
                </el-form-item>
                <el-form-item label="爱好">
                    <el-input v-model="ruleForm.hobby" placeholder="请输入爱好"></el-input>
                </el-form-item>
                <el-form-item label="身份证">
                    <el-input v-model="ruleForm.idNumber" placeholder="请输入身份证号"></el-input>
                </el-form-item>

                <el-form-item label="状态">
                    <el-input v-model="ruleForm.status" placeholder="请输入状态"></el-input>
                </el-form-item>
                <el-form-item label="班级">
                    <el-select v-model="ruleForm.clazzName" placeholder="请选择班级">
                        <el-option v-for="item in clazzNames" :key="item" :label="item" :value="item">{{item}}</el-option>
                    </el-select>
                </el-form-item>

<!--            </div>-->
            <el-form-item label="描述" class="desc" style="width: 500px">
                <el-input type="textarea" v-model="ruleForm.description" placeholder="请输入您的留言"></el-input>
            </el-form-item>

<!--            <div class="mine">-->
                <el-form-item label="缴费状态">
                    <el-select v-model="ruleForm.payStatus" placeholder="请选择缴费状态">
                        <el-option label="已完成" value="已完成"></el-option>
                        <el-option label="未完成" value="未完成"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="共缴费金额">
                    <el-input v-model="ruleForm.payCount"></el-input>
                </el-form-item>
<!--            </div>-->

<!--            <div class="subBox address">-->
                <el-form-item>
                    <el-button  @click="goBack()">取消</el-button>
                    <el-button type="primary" @click="submitForm('ruleForm', false)">保存</el-button>
                </el-form-item>
<!--            </div>-->
<!--            <div>-->
            <el-button  @click="openTable()">查看该学生的缴费流水</el-button>
            <el-button type="info" @click="opentui">学员办理退费</el-button>
            <el-button type="info" @click="deletebyid">学员退学业务办理</el-button>
<!--            </div>-->
            <el-table :data="tableData" stripe class="tableBox" v-if="tableStatus == true">
                <el-table-column prop="accountName" label="账户名"></el-table-column>
                <el-table-column prop="studentName" label="学生名"></el-table-column>
                <el-table-column prop="payment" label="支付方式"></el-table-column>
                <el-table-column prop="count" label="金额"></el-table-column>
                <el-table-column prop="updateTime" label="操作时间"></el-table-column>

            </el-table>
        </el-form>

        <!--退款表单-->
        <el-dialog title="退款表单" :visible.sync="opentuiStatus">
            <el-form :model="tuiForm">
                <el-form-item label="退款会员姓名" :label-width="formLabelWidth">
                    <el-input v-model="tuiForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="退款支付账号" :label-width="formLabelWidth">
                    <el-select v-model="tuiForm.account" placeholder="请选择支付账号">
                        <el-option v-for="item in accountlist" :label="item" :value="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="退款金额" :label-width="formLabelWidth">
                    <el-input v-model="tuiForm.count" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="退款方式" :label-width="formLabelWidth">
                    <el-input v-model="tuiForm.payment" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="退款原因" :label-width="formLabelWidth">
                    <el-input v-model="tuiForm.desctext" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="opentuiStatus = false">取 消</el-button>
                <el-button type="primary" @click="tuiMoney">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/lib/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/request.js"></script>
<script src="../../api/student.js"></script>
<script src="../../js/validate.js"></script>
<script src="../../js/index.js"></script>
<script>

    new Vue({
        el: '#admin-add-app',
        data() {
            return {
                id: '',
                actionType: '',
                clazzNames: ['aaa','ccc'],
                channelNames: ['bbb','ccc'],
                tableStatus:true,
                opentuiStatus:false,
                tableData:[],
                ruleForm: {
                    name: '',
                    sid: '',
                    clazzId: '',
                    age: '',
                    major: '',
                    grade: '',
                    school: '',
                    sex: '',
                    address: '',
                    phone: '',
                    parentPhone: '',
                    hobby: '',
                    idNumber: '',
                    status: '',
                    gone:'',
                    description: '',
                    channelName:'',
                    clazzName:'',
                    payStatus:'',
                    payCount:''
                },
                tuiForm:{
                    id:"",
                    name:"",
                    account:"",
                    count:"",
                    desctext:"",
                    payment:"微信"
                },
                accountlist:[]
            }
        },

        created() {
            /*获取参数id*/
            this.id = requestUrlParam('id');//从网址上解析参数
            /*判断参数是id还是add  -》如果是id调用edit   否则调用add*/
            this.actionType = this.id ? 'edit' : 'add';
            if (this.id) {
                this.init()
            }
        },
        mounted() {
        },
        methods: {
            async init () {
                //发起一个异步请求，获取用户信息
                queryStudentById(this.id).then(res => {
                    // console.log(res);
                    if (String(res.code) === '1') {
                        // console.log(res.data);
                        this.ruleForm = res.data;
                        // this.ruleForm.password = ''
                    } else {
                        this.$message.error(res.msg || '操作失败')
                    }
                })
                getAllClazzName().then(res=>{
                    this.clazzNames = res.data
                    console.log(res.data)
                })
                getAllChannelName().then(res=>{
                    this.channelNames = res.data
                    console.log(res.data)
                })
                //获取流水信息
                getStudentFlow(this.id).then(res => {
                    if (String(res.code) === '1') {
                        this.tableData = res.data;
                    } else {
                        this.$message.error(res.msg || '操作失败')
                    }
                })
            },
            submitForm (formName, st) {
                var _this = this
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        const params = {
                            ...this.ruleForm,
                        };
                        editStudent(params).then(res => {
                            if (res.code === 1) {
                                this.$message.success('学生信息修改成功！');
                                setTimeout(function (){
                                    _this.goBack()
                                },1000);

                            } else {
                                this.$message.error(res.msg || '操作失败')
                            }
                        }).catch(err => {
                            this.$message.error('请求出错了：' + err)
                        })
                    } else {
                        console.log('error submit!!');
                        return false
                    }
                })
            },
            openTable(){
                this.tableStatus = !this.tableStatus
            },
            opentui(){
                this.opentuiStatus = true
                this.tuiForm.name = this.ruleForm.name
                this.tuiForm.id = this.ruleForm.id
                // 查询退款账户列表
                getAllAccountName().then(res => {//请求结果处理
                    if (String(res.code) === '1') {
                        this.accountlist = res.data
                    }else{
                        this.$message.error(res.msg)
                    }
                }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                })
            },
            tuiMoney(){
                this.$confirm("用"+this.tuiForm.account+"账户给"
                    +this.tuiForm.name+"退款"+this.tuiForm.count+'元，确认退款?', '提示', {
                    'confirmButtonText': '确定',
                    'cancelButtonText': '取消',
                    'type': 'warning'
                }).then(() => {//点击确定执行
                    returnCount(this.tuiForm).then(res => {//请求结果处理
                        if (String(res.code) === '1') {
                            this.opentuiStatus = false
                            this.$message.success("用"+this.tuiForm.account+"账户给"
                                +this.tuiForm.name+
                                "退款"+this.tuiForm.count+'元，已退款！');

                        }else{
                            this.$message.error(res.msg)
                        }
                        this.init()
                    }).catch(err => {
                        this.$message.error('请求出错了：' + err)
                    })
                })
            },
            deletebyid(){
                this.$confirm("请确认在学员描述中填写退学原因！" +
                    "是否办理退学手续？", '提示', {
                    'confirmButtonText': '确定',
                    'cancelButtonText': '取消',
                    'type': 'warning'
                }).then(() => {//点击确定执行
                    deletebyid(this.ruleForm).then(res => {//请求结果处理
                        if (String(res.code) === '1') {
                            this.$message.success("退学完成，已存档！");
                        }else{
                            this.$message.error(res.msg)
                        }
                        // 返回首页
                        this.goBack()
                    }).catch(err => {
                        this.$message.error('请求出错了：' + err)
                    })
                })
            },
            goBack(){
                window.parent.menuHandle({
                    id: '3',
                    url: '/back/page/student/list.html',
                    name: '学生管理'
                },false)
            }
        }
    })
</script>
</body>
</html>